﻿<style>
    .card-text {
        height: auto;
        box-shadow: 0px 5px 10px 0px #000000;
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
        padding: 10px;
        margin: 10px;
    }

    .card-text-body {
        font-size: 14px;
        padding-top: 10px;
        padding-left: 10px;

    }
    .firstBox .secondBox .topBox .footerBox{
        padding-left:2px;
        padding-right:2px;
    }
    .table-top {
        background-color: aquamarine;
    }
    .table-body {
        text-align: center;
    }
</style>
<div>
    <div class="row">
        <div class="col-md-6 col-sm-6 firstBox">
            <div class="panel panel-default card-text" style="height:378px;width:478px;" id="ExaminationPaperCopies">

            </div>
        </div>
        <div class="col-md-6 col-sm-6 secondBox">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="col-md-4 col-sm-4 panel panel-default card-text" style="padding-left:2px;padding-right:2px;">
                        <div class="card-text-body">
                            本月考试次数  @*看有无发布判断*@
                        </div>
                        <div class="panel-body" style="font-size:20px;color: #337ab7" id="ReleasedThisMonthByTestNumber">

                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 panel panel-default card-text" style="padding-left:2px;padding-right:2px;">
                        <div class="card-text-body">
                            待批改试卷   @*看有无审批判断*@
                        </div>
                        <div class="panel-body" style="font-size:20px;color: #337ab7" id="unReadSum">
                            0
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 footerBox">
                    <div class="panel panel-default card-text" style="height:100px;">
                        <div style="font-size:16px;">最近一次考试信息</div>
                        <div class="col-md-3 col-sm-3 " style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                参与人数
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="ExaminationNumber">
                                0
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                参与率
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="ExaminationPercent">
                                0
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                合格人数
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="NumberOfPass">0</div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                合格率
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="PercentOfPass">0</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 footerBox">
                    <div class="panel panel-default card-text" style="height:100px;">
                        <div class="col-md-3 col-sm-3 " style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                试卷总份数
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="ExaminationPaperTotalNumber">

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                发布试卷份数
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7" id="ReleasePaperCopies">

                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                加班中！
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7">0</div>
                        </div>
                        <div class="col-md-3 col-sm-3" style="padding-left:2px;padding-right:2px;">
                            <div class="card-text-body">
                                加班中！
                            </div>
                            <div class="panel-body" style="font-size:20px;color: #337ab7">0</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="row panel panel-default card-text" >
        <div class="col-md-12 col-sm-12" style="padding-left:2px;padding-right:2px;">
            <div class="card-text-body" style="font-size:15px;font-style:italic">
                @*本月创建的试卷*@
                @*<button type="button" class="btn" id="showMonthTest" style="float:right">查看历史记录</button>*@
            </div>

            <div class="panel-body" style="font-size:20px;color: #000000">
                <div class="row" id="title">
                    <div class="col-md-3 col-sm-3"><span>试卷名称</span></div>
                    <div class="col-md-3 col-sm-3"><span>创建时间</span></div>
                    <div class="col-md-6 col-sm-6"></div>
                    <hr />
                </div>
                <div id="table_body">

                </div>
                <div id="demo1"></div>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/DateTime.js"></script>
<script src="~/Scripts/TestPaper/TestFunction.js"></script>
<script>
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    //var years = year + "/" + month;
    ObtainTestNumber();
    var g;
    function ObtainTestNumber() {
        $.ajax({
            async: false,
            url: '/Curricula/ObtainTestNumber',  // 跨域URL
            type: 'post',
            dataType: 'json',
            data: {
                year: year,
                month: month
            },
            timeout: 5000,
            success: function (json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
                // const f = json.ToBeCorrectingOurExamPapers;//待批改试卷
                //g = json.ToCreateThisMonth;
                console.log(json);
                g = json.monthCreate;   // 本月创建的试卷集
                document.getElementById("ExaminationPaperCopies").innerHTML = json.monthCreateSum;      //本月创建试卷
                document.getElementById("ExaminationPaperTotalNumber").innerHTML = json.allTestSum;     //总试卷份数
                document.getElementById("ReleasePaperCopies").innerHTML = json.publishSum;              //总发布试卷份数
                document.getElementById("ReleasedThisMonthByTestNumber").innerHTML = json.monthPublishSum;//本月考试次数
                showCharts(json.everyMonthSum);
                $('#unReadSum').text(json.unReadSum);

                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    laypage.render({
                        elem: 'demo1'
                        , count: g.length
                        , jump: function (obj) {
                            document.getElementById('table_body').innerHTML = function () {
                                var arr = [], thisData = g.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                layui.each(thisData, function (index, item) {
                                    var items = showTest(index);
                                    arr.push(items);
                                });
                                return arr.join('');
                            }();
                        }
                    });
                });
                //for (let i = 0; i < json.monthCreate.length; i++) {

                //    showCreateThisMonth(i);
                //}
            },
        });
    }

    //function showCreateThisMonth(i) {
    //    var item = '<div class="col-md-6 col-sm-6" style>' + g[i].TestName + '</div>'
    //        + '<div class="col-md-6 col-sm-6">' + g[i].CreateTime + '</div>'
    //        + '<hr/>'
    //    $("#table_body").append(item);
    //}
    function showTest(id) {
            var str = '';
            const testId = g[id].testId;

            if ("@User.IsInRole("teachers")" === "True" || "@User.IsInRole("admin")" === "True") {
                if (g[id].status === 0) {
                    str = `<button type="button" class="layui-btn layui-btn-sm issue" button-Item="${testId}">发布 </button>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm updateTest" button-Item="${testId}">进入</button>
                            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm editTest" button-Item="${testId}">编辑</button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm deleteTest" button-Item="${testId}">删除</button>`;
                } else if (g[id].status === 1) {
                    str = `<button type="button" class="layui-btn layui-btn-normal layui-btn-sm answerIs" button-Item="${testId}">查看答题情况</button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm shutdownIssue" button-Item="${testId}">结束发布</button>`;
                } else if (g[id].status === 3) {
                    str = `<button type="button" class ="layui-btn layui-btn-normal layui-btn-sm examInfo" button-Item="${testId}">考试详细信息</button>
                            <a href="/AnswerInfoTb/TeacherReviewPaper/${testId}" style="text-decoration:none" class="layui-btn layui-btn-primary layui-btn-sm" >批阅试卷</a>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm deleteTest" button-Item="${testId}">删除</button>`;
                }
            } else {
                layer.msg("您还未登录，请登录后进行操作");
            }
            const items = `<div class="row">
                            <div class="col-md-3 col-sm-3"><span id="TestName_${testId}">${g[id].testName}</span></div>
                            <div class="col-md-3 col-sm-3"><span id="CreateTime_${testId}">${g[id].createTime}</span></div>
                            <div class="col-md-4 col-sm-4" style="margin-bottom:10px;">${str}</div>
                            <hr/>
                           </div>`;
            return items;
        }
    $("#showAllTest").click(function () {
        var e = window.location.pathname;
        var index = e.lastIndexOf('/');
        var str = e.substring(19, index);
        window.location.assign("/TestPaperTbs/Index?Id=" + str);
    })
    $("#showMonthTest").click(function () {
        var e = window.location.pathname;
        var index = e.lastIndexOf('/');
        var str = e.substring(19, index);
        window.location.assign("/TestPaperTbs/Index?Id=" + str);
    })


    function showCharts(everyMonthSum) {
        var title = {
            text: '每月试卷数'
        };
        var subtitle = {
            text: '来源: 系统统计分析提供'
        };
        var xAxis = {
            categories: ['1', '2', '3', '4', '5', '6',
                '7', '8', '9', '10', '11', '12']
        };
        var yAxis = {
            title: {
                text: '试卷数 (份)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: '份'
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series = [
            {
                name:"试卷份数",
                data: everyMonthSum
            }
        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#ExaminationPaperCopies').highcharts(json);
    }
</script>